<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>classList的使用</title>
    <style>
      .bg{background:#ccc;}
      .strong{font-size:24px;color:red;}
      .smooth{height:30px;width:120px;border-radius:10px;}
    </style>
  </head>
  <body>
    <ul>
      <li>PHP</li>
      <li class="bg">JavaScript</li>
      <li>C++</li>
      <li>Java</li>
    </ul>
    <script>      // 获取第2个li元素      var ele = document.getElementsByTagName('li')[1];      // 若li元素中没有strong类，则添加      if (!ele.classList.contains('strong')) {        ele.classList.add('strong');      }      // 若li元素中没有smooth类，则添加；若有删除      ele.classList.toggle('smooth');      console.log('添加与切换样式后：');      console.log(ele);    </script>
    <script>
      ele.classList.remove('bg');
      console.log('删除后：');
      console.log(ele);
    </script>
  </body>
</html>